<template>
	<view class="introduce">
		<h5>豆果美食，会做饭很酷~</h5>
		<p>你关注人的动态会出现在这</p>
		<p>为你推荐了一些有趣的人，快关注 TA 们吧</p>
	</view>
	<!-- 数据渲染 -->
	<view class="list">
		<view class="item" v-for="item in data.rfs" :key="item.id">
			<view class="header">
				<view class="portrait">
					<image :src="item.u.p"></image>
				</view>
				<view class="header-middle">
					<view class="one-row">
						<h6>{{item.u.n}}</h6>
						<i>LV.{{item.u.lv}}</i>
					</view>
					<view class="two-row">
						<span>{{item.u.followers_count_text}} · {{item.u.recipes_count_text}}</span>
					</view>
				</view>
				<view class="attention-btn">
					关注
				</view>
			</view>
			<view class="middle">
				<navigator :url="`/pages/detailPage/detailPage?itemId=${item.item_id}`" class="route">
					<image :src="item.p_gif && item.p_gif.length > 0 ? item.p_gif : item.img"></image>
				</navigator>
			</view>
			<view class="footer">
				<view class="footer-one">
					<view class="left">
						<view class="enshrine" v-for="(icon, index) in item.collect_users" :key="index"
							:style="{ 'margin-left': index > 0 ? '-7px' : '0' }">
							<image :src="icon.p" mode=""></image>
						</view>
						<span>10人收藏</span>
					</view>
					<view class="right">
						<view class="icon collect-icon">
							<image src="../../static/enshrine.png" mode=""></image>
						</view>
						<view class="icon comment-icon">
							<image src="../../static/comment.png" mode=""></image>
						</view>
						<view class="icon transmit-icon">
							<image src="../../static/transmit.png" mode=""></image>
						</view>
					</view>
				</view>
				<view class="footer-two">
					<p>{{item.t}}</p>
				</view>
				<view class="footer-three">
					<span v-if="item.events && item.events.length > 0">
						<i>
							<image src="../../static/jing.png" mode=""></image>
						</i>
						<span class="jing">{{ item.events[0].c }}</span>
					</span>
				</view>
			</view>

		</view>
	</view>

</template>

<script setup>
	import {
		onMounted,
		reactive
	} from 'vue'


	const data = reactive({
		rfs: []
	})

	// 数据请求

	onMounted(() => {
		uni.request({
			url: "https://apis.netstart.cn/douguo/home/ffeeds/0/20",
			success: (res) => {
				console.log('关注列表', res);
				// 数据保存
				data.rfs = res.data.result.rfs
				console.log(data.rfs);
			}
		})
	})
	
</script>

<style lang="scss">
	.introduce {
		width: 100%;
		height: 64px;
		background-color: #fafafa;
		padding: 18px 18px;

		h5 {
			color: #2a2a2a;
			margin-bottom: 8px;
		}

		p {
			font-size: 12px;
			margin-bottom: 2px;
			color: #9e9e9e;
		}
	}

	.list {
		width: 100%;
		height: auto;
		// background-color: paleturquoise;

		.item {
			width: 100%;
			height: auto;
			// background-color: gold;

			.header {
				width: 100%;
				height: 55px;
				// background-color: peachpuff;
				display: flex;
				align-items: center;

				.portrait {
					width: 33px;
					height: 33px;
					border-radius: 50%;
					margin-left: 15px;
					// background-color: lawngreen;

					image {
						width: 100%;
						height: 100%;
						border-radius: 50%;
					}
				}

				.header-middle {
					width: 316px;
					height: 35px;
					margin-left: 8px;
					// background-color: paleturquoise;

					.one-row {
						display: flex;

						h6 {
							color: #2a2a2a;
						}

						i {
							color: #cba53d;
							font-size: 10px;
							margin-top: 4px;
							margin-left: 10px;
							font-weight: bold;
						}
					}

					.two-row {
						font-size: 12px;
						color: #a4a4a4;

					}
				}

				.attention-btn {
					width: 66px;
					height: 28px;
					line-height: 30px;
					text-align: center;
					font-size: 13px;
					font-weight: bold;
					border-radius: 30px;
					background-color: #ffc533;
				}

			}

			.middle {
				width: 100%;
				height: 340px;

				.route {
					width: 100%;
					height: 100%;

					image {
						width: 100%;
						height: 100%;

					}
				}




			}

			.footer {
				width: 100%;
				height: 120px;
				// background-color: darkcyan;

				.footer-one {
					width: 100%;
					height: 38px;
					// background-color: paleturquoise;
					display: flex;
					justify-content: space-between;

					.left {
						width: 200px;
						height: 100%;
						// background-color: plum;
						display: flex;
						padding: 0 12px;

						.enshrine {
							width: 19px;
							height: 19px;
							border-radius: 50%;
							margin-top: 13px;
							padding: 1px;
							background-color: white;

							image {

								width: 100%;
								height: 100%;
								border-radius: 50%;
							}
						}

						span {
							font-size: 13px;
							color: #3a3a3a;
							margin-left: 9px;
							margin-top: 17px;
						}
					}

					.right {
						width: 130px;
						height: 100%;
						// background-color: palegreen;
						display: flex;

						.icon {
							width: 26px;
							height: 26px;
							// background-color: brown;
							// border: 1px solid black;
							margin-top: 10px;

							&:nth-child(1) {
								margin-right: 16px;
							}

							&:nth-child(2) {
								margin-right: 14px;
							}

							image {
								width: 100%;
								height: 100%;
							}



						}
					}
				}

				.footer-two {
					width: 100%;
					height: 22px;
					// background-color: pink;
					padding-left: 14px;
					margin-top: 8px;

					p {
						font-size: 16px;
						color: #383838;
						// margin-top: -4px;
						// background-color: palegreen;
					}
				}

				.footer-three {
					width: 100%;
					height: 18px;
					margin-top: 8px;
					// background-color: brown;
					padding-left: 12px;

					span {

						i {
							display: inline-block;
							width: 16px;
							height: 16px;
							margin-top: -6px;
							vertical-align: middle;
							// background-color: orange;

							image {
								width: 100%;
								height: 100%;
							}
						}

						.jing {
							display: inline-block;
							font-size: 14px;
							margin-left: 2px;
							color: #5398a0;
							vertical-align: middle;
						}
					}




				}
			}



		}
	}
</style>